import React, { Component } from 'react'
import { Menu } from 'antd'
import {
  FireFilled,
  ShareAltOutlined,
  CommentOutlined,
} from '@ant-design/icons'
import './index.less'

class News extends Component {
  state = {
    current: 'news',
  }

  render() {
    const { current } = this.state
    return (
      <div className="news">
        {/* 左侧 */}
        <div className="news_left">
          {/* 今日要闻 */}
          <div className="today_news">
            {/* 今日要闻-标题 */}
            <Menu selectedKeys={[current]} mode="horizontal">
              <Menu.Item key="news" className="title">
                今日要闻
              </Menu.Item>
            </Menu>
            {/* 今日要闻-新闻列表 */}
            <ul className="today_newslist">
              <li>二连浩特最后一批滞留人员乘专列返程</li>
              <li>二连浩特最后一批滞留人员乘专列返程</li>
              <li>二连浩特最后一批滞留人员乘专列返程</li>
              <li>二连浩特最后一批滞留人员乘专列返程</li>
              <li>二连浩特最后一批滞留人员乘专列返程</li>
            </ul>
          </div>

          {/* 热点要闻 */}
          <div className="hotspot_news">
            {/* 热点要闻-标题 */}
            <Menu selectedKeys={[current]} mode="horizontal">
              <Menu.Item key="news" className="title">
                热点精选
              </Menu.Item>
            </Menu>
            {/* 热点要闻-新闻列表 */}
            <ul className="hotspot_newslist">
              <li className="hotspot_newsItem">
                {/* 左侧图片 */}
                <div className="imgwrap">
                  <img
                    className="img"
                    src="http://inews.gtimg.com/newsapp_ls/0/14185430126_640330/0"
                    alt=""
                  />
                </div>
                {/* 右侧简介 */}
                <div className="detail">
                  {/* 右侧简介-标题 */}
                  <h3 className="title">
                    <FireFilled style={{ color: 'red' }} />
                    江苏启东3名小学生坠楼，较危重的1名学生已送往上海救治
                  </h3>
                  {/* 右侧简介-信息 */}
                  <div className="info" justify="between">
                    <span>极目新闻 1小时前</span>
                    <span>
                      <ShareAltOutlined />
                      分享&nbsp;&nbsp;
                      <CommentOutlined />
                      101
                    </span>
                  </div>
                </div>
              </li>
              <li className="hotspot_newsItem">
                {/* 左侧图片 */}
                <div className="imgwrap">
                  <img
                    className="img"
                    src="http://inews.gtimg.com/newsapp_ls/0/14185430126_640330/0"
                    alt=""
                  />
                </div>
                {/* 右侧简介 */}
                <div className="detail">
                  {/* 右侧简介-标题 */}
                  <h3 className="title">
                    <FireFilled />
                    江苏启东3名小学生坠楼，较危重的1名学生已送往上海救治
                  </h3>
                  {/* 右侧简介-信息 */}
                  <div className="info" justify="between">
                    <span>极目新闻&nbsp;&nbsp;1小时前</span>
                    <span>
                      <ShareAltOutlined />
                      分享&nbsp;&nbsp;
                      <CommentOutlined />
                      101
                    </span>
                  </div>
                </div>
              </li>
              <li className="hotspot_newsItem">
                {/* 左侧图片 */}
                <div className="imgwrap">
                  <img
                    className="img"
                    src="http://inews.gtimg.com/newsapp_ls/0/14185430126_640330/0"
                    alt=""
                  />
                </div>
                {/* 右侧简介 */}
                <div className="detail">
                  {/* 右侧简介-标题 */}
                  <h3 className="title">
                    <FireFilled />
                    江苏启东3名小学生坠楼，较危重的1名学生已送往上海救治
                  </h3>
                  {/* 右侧简介-信息 */}
                  <div className="info" justify="between">
                    <span>极目新闻 1小时前</span>
                    <span>
                      <ShareAltOutlined />
                      分享&nbsp;&nbsp;
                      <CommentOutlined />
                      101
                    </span>
                  </div>
                </div>
              </li>
              <li className="hotspot_newsItem">
                {/* 左侧图片 */}
                <div className="imgwrap">
                  <img
                    className="img"
                    src="http://inews.gtimg.com/newsapp_ls/0/14185430126_640330/0"
                    alt=""
                  />
                </div>
                {/* 右侧简介 */}
                <div className="detail">
                  {/* 右侧简介-标题 */}
                  <h3 className="title">
                    <FireFilled />
                    江苏启东3名小学生坠楼，较危重的1名学生已送往上海救治
                  </h3>
                  {/* 右侧简介-信息 */}
                  <div className="info" justify="between">
                    <span>极目新闻 1小时前</span>
                    <span>
                      <ShareAltOutlined />
                      分享&nbsp;&nbsp;
                      <CommentOutlined />
                      101
                    </span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>

        {/* 右侧 */}
        <div className="news_right">
          {/* 热点要闻 */}
          <div></div>
        </div>
      </div>
    )
  }
}

export default News
